<template>
  <el-dialog title="新增" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="主题：" prop="theme">
        <el-select v-model="form.theme" placeholder="请选择主题" clearable style="width: 240px">
          <el-option v-for="dict in themeList" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="用户ID：" prop="u_id">
        <el-input v-model="form.u_id" placeholder="请输入用户id"></el-input>
      </el-form-item>
      <el-form-item label="用户姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="公司名称：" prop="company_name">
        <el-input v-model="form.company_name" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="行业：" prop="industry_name">
        <el-input v-model="form.industry_name" placeholder="请输入行业"></el-input>
      </el-form-item>
      <el-form-item label="联系时间：" prop="time">
        <el-date-picker
          v-model="form.time"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="跟进结果：" prop="msg">
        <el-input type="textarea" v-model="form.msg" placeholder="请输入跟进结果"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="onSubmit('form')">提交</el-button>
    </div>

  </el-dialog>

</template>

<script>
  import { reqAdviceThemeList, reqAddServe } from '@/api/customerServiceMgt/index'
  import { isPhone } from '@/utils/validate'

  export default {
    name: 'addOrEditServe',
    data() {
      const validPhoneNeed = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入手机号码'))
        } else {
          if (!isPhone(value)) {
            callback(new Error('请输入正确的11位手机号码'))
          }else {
            callback();
          }
        }
      }
      return {
        form: {
          u_id: '',//用户id
          name: '',//名称
          phone: null,//手机号码
          company_name: null,//公司名称
          industry_name: null,//行业
          time: null,//联系时间
          msg: ''//跟进结果
        },
        themeList: [],//主题
        rules: {
          theme: [
            { required: true, message: '请选择主题', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请填写姓名', trigger: 'blur' }
          ],
          msg: [
            { required: true, message: '请填写跟进结果', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '请选择时间', trigger: 'blur'}
          ],
          phone: [
            { validator: validPhoneNeed, trigger: 'blur' }
          ]

        }
      }
    },
    created() {
      this.getAdviceThemeList()//主题
    },
    mounted() {
    },
    watch: {},
    methods: {
      getAdviceThemeList() {
        reqAdviceThemeList().then(res => {
          console.log('res111', res.data)
          let data = res.data
          for (let key in data) {
            let obj = {
              value: key,
              label: data[key]
            }
            this.themeList.push(obj)
          }
        })
      },
      onSubmit(formName) {
        //提交的代码
        this.$refs[formName].validate((valid) => {
          if (valid) {
            reqAddServe(this.form).then(res => {
              this.$modal.msgSuccess('操作成功！')
              this.$emit('handleQuery')//更新列表
              this.handleCloseDialog()//关闭窗口
            })

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false)
        this.$emit('handleCloseFilter') //关闭弹窗;
      }
    }
  }
</script>

<style scoped lang="scss">
  .addOrEditAdGroup {
    position: relative;
    padding-bottom: 60px;
    height: 100%;

    .tips {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      color: #666;

      img {
        margin-right: 10px;
      }
    }

    .plug_id {
      display: flex;
      flex-wrap: wrap;

      .el-checkbox {
        width: calc(20% - 16px);
        position: relative;
        min-width: 250px;
        box-sizing: border-box;
        border: 1px solid #eee;
        padding: 10px 20px;
        margin-right: 20px;
        margin-bottom: 10px;

        &:last-child {
          margin-right: 0;
        }

        ::v-deep .el-checkbox__input {
          width: 100%;
          height: 100%;
          position: absolute;
          opacity: 0;
          left: 0px;
          top: 0px;

          .el-checkbox__inner {
            display: none;
          }
        }

        ::v-deep .el-checkbox__label {
          padding-left: 0;
          width: 100%;

          .choose {
            position: absolute;
            right: 20px;
            background: #EFEFEF;
            border-radius: 66px 66px 66px 66px;
            opacity: 1;
            border: 1px solid #BEBEBE;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 65px;
            height: 26px;
          }

          .label {
            font-size: 16px;
            font-weight: bold;
            height: 30px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
          }

          .imgDiv {
            width: 100%;

            img {
              width: 100%;
              height: 100px;
              object-fit: cover;
            }
          }

          .tipsContent {
            color: #545867;
            margin-top: 14px;
            white-space: normal;
          }
        }

        &.is-checked {
          .label {
            color: #404958;
          }

          .choose {
            background: #1670F1;
            color: #fff;
            border-color: #1670F1;
          }
        }
      }
    }

    .advertType, .launchType {
      display: flex;
      flex-wrap: wrap;

      .el-checkbox {
        width: 88px;
        height: 32px;
        border: 1px solid #C4C4C4;
        position: relative;
        margin-right: 14px;
        line-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        ::v-deep .el-checkbox__input {
          width: 100%;
          height: 100%;
          position: absolute;
          opacity: 0;
          left: 0px;
          top: 0px;
        }

        ::v-deep .el-checkbox__label {
          padding-left: 0px;
        }

        &.is-checked {
          border: 1px solid #1670F1;
          background: #1670F1;
          color: #fff;

          ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #fff;
          }
        }
      }
    }

    .el-radio {
      width: 88px;
      height: 32px;
      border: 1px solid #C4C4C4;
      position: relative;
      margin-right: 14px;
      line-height: 32px;
      justify-content: center;
      display: flex;

      ::v-deep .el-radio__inner {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        left: 0px;
        top: 0px;
        cursor: pointer;
      }

      ::v-deep .el-radio__label {
        padding-left: 0px;
      }

      &.is-checked {
        border: 1px solid #1670F1;
        background: #1670F1;
        color: #fff;

        ::v-deep .el-radio__input.is-checked + .el-radio__label {
          color: #fff;
        }
      }
    }

    .budget_type {
      display: flex;
      align-items: center;
      flex-wrap: wrap;


    }

    .form-list {
      border-bottom: 10px solid #F8F9FD;
      padding: 10px 20px;
      background: #fff;
    }

    .el-form {
      height: 100%;
      overflow-y: auto;

      .el-form-item {
        margin-bottom: 15px;

        .selfInput {
          width: 30%;
          min-width: 250px;
        }
      }

      .form-bigTitle {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #444;
        position: relative;
        padding-left: 10px;

        &:before {
          position: absolute;
          left: 0px;
          content: '*';
          color: red;

        }
      }
    }

    .footer-btn {
      position: absolute;
      bottom: 0px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 60px;
      left: 0px;
      background: #F8F9FD;

      .el-button {
        width: 110px;
        height: 42px;
        margin: 0px 14px;
        border-radius: 77px 77px 77px 77px;
      }

      &.el-button--primary {
        background: #1670F1;
      }

    }
  }
</style>
